<template>
  <view class="before-result-page-mbti">
    <view class="fixed-right-tip" @click="backToSclList" v-if="showMoreSclBlock">
      更多测评 
      <u-icon color="#7E3508" size="24rpx" name="arrow-right"></u-icon>
    </view>
    <template v-for="(img,index) in staticImgs.imgArr" >
      <view class="img-wrapper">
        <image class="img" :src="img" mode="widthFix"></image>  
        <view class="box-wrapper-1-pos" v-if="index === 0">
          <view class="info-box-list">
            <view class="scl-num-box">
              测评报告编号：{{ reportId || reportInfo.serialNumber || reportInfo.id }}
            </view>
            <view class="scl-name-box">
              {{reportInfo.sclName}}
            </view>
            
            <view class="img-wrapper">
              <image class="img-item" :src="imgData.added" mode=""></image>
            </view>  
            
            <view class="price-wrapper">
              <view class="unit">¥</view>
              <view class="num">{{sclInfo.newOriginalPrice || 0}}</view>
              <view class="text">免测立即解锁MBTI专业分析报告</view>
            </view>
          </view>
          
          <view  class="small-btn-wrapper first-small-btn" @click="confirmHandle" >
            <image  class="img" :src="staticImgs.smallBtnImg" mode=""></image>
            <!-- 解锁专属报告 -->
          </view>
          
        </view>
      
        <view class="box-wrapper-3-pos" v-else-if="index === 2">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
        <view class="box-wrapper-4-pos" v-else-if="index === 3">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
        <view class="box-wrapper-5-pos" v-else-if="index === 4">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
        
        <view class="box-wrapper-6-pos" v-else-if="index === 5">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
        
        <view class="box-wrapper-8-pos" v-else-if="index === 7">
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
        
        <view class="box-wrapper-10-pos" v-else-if="index === 9">
          
          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
        <view class="box-wrapper-12-pos" v-else-if="index === 11">

          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
        
        <view class="box-wrapper-14-pos" v-else-if="index === 13">

          <view class="small-btn-wrapper" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode=""></image>
          </view>
        </view>
        
      </view>
    </template>
    
    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <!-- 解锁专属报告 -->

      <view class="btn-wrapper" @click="confirmHandle">
        <image class="btn-img" :src="staticImgs.btnImg" mode=""></image>
      </view>
      
    </view>
    
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue"
  import {removeEmptyProperty} from '@/common/utils/util.js'
  import { debounce } from 'lodash'
  
  export default{
    components:{
      navigationBar
    },
    props:{
      scrollTopNum:{
        type:Number,
        default:0
      },
      imgData:{
        type:Object,
        default:()=>{}
      },
      nextId:{
        type:String,
        default:'',
      },
      reportId:{
        type:String,
        default:'',
      },
      reportInfo:{
        type:Object,
        default:()=>{}
      },
    },

    watch:{
      scrollTopNum(val){
        this.showFixedBtn = val>this.windowHeight
      },
      nextId:{
        handler(val){
          if(val){
            uni.showLoading({
              title:'数据加载中...'
            })
            this.$u.api.getSclInfo(removeEmptyProperty({
              sclId: this.nextId,
              code:this.$store.state.user.actCouponCode
            })).then(res=>{
              this.sclInfo = res.data.data
              console.log(res,'========res')
            }).finally(err=>{
              console.log(err)
            })
          }
        },
        immediate:true
      }
    },
    data(){
      return{
        navigationBarDataInfo:{
        	"bg_color": "#fff",
        	"color": "#333",
        	"flag": 1,
        	"name": "测一测",
          "hasEntity":true,
        },
        nowPrice:0,
        showMoreSclBlock:false,
        windowHeight:99999,
        modalVisible:false,
        sclInfo:{},
        staticImgs:{
          imgArr:[
            this.imgBaseURL + '/scl/result/QingYuNianMBTI_ZRB/next/bg.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-22x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-32x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-42x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-52x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-62x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-72x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-82x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-92x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-102x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-112x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-122x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-132x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-142x.png',
            this.imgBaseURL + '/scl/ad/MBTI/M-152x.png',
          ],
          tipImg:this.imgBaseURL + '/scl/dialog-bg-1.jpg',
          btnImg:this.imgBaseURL + '/scl/ad/MBTI/unlock-btn.png',
          smallBtnImg: this.imgBaseURL + '/scl/ad/MBTI/small-unlock-btn.png',
        },
        loading:false,
        showFixedBtn:false,
        showAdsWrapper1:true,
        showAdsWrapper2:true,
      }
    },
    mounted() {
      const self = this
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight - 50
        }
      })
    },
    methods:{
      backHandle(){
        uni.reLaunch({
          url:'/pages/sclList/sclList'
        })        
      },
      backToSclList(){
        uni.reLaunch({
          url:'/pages/sclList/sclList'
        })
      },
      payHandle:debounce(function(isDisPay) {
        if(this.loading) return
        uni.showLoading({
          title:"请求支付中..."
        })
              
        this.loading = true
        const self = this
        const submitForm = removeEmptyProperty({
          sclId: this.nextId,
          reportId: this.reportId,
          orderType: '14',
          isAdditional:'N',
          adClickId: uni.getStorageSync('adClickId'),
          isDisPay:(isDisPay == 'Y') ? 'Y' : 'N'
        })
        
        this.$u.api.orderPay(submitForm).then(res=>{
          
          if (res.data.code == 200) {
          	uni.requestPayment({
          		provider: 'wxpay',
          		service: 5,
          		orderInfo: res.data.data.wr,
          		timeStamp: res.data.data.wr.timeStamp,
          		nonceStr: res.data.data.wr.nonceStr,
          		package: res.data.data.wr.packageValue,
          		signType: res.data.data.wr.signType,
          		paySign: res.data.data.wr.paySign,
          		success: function(res) {
                self.$u.api.getNewReportId({
                  reportId: self.reportId
                }).then(({data:subRes})=>{
                  console.log(subRes,'===========subRes')
                  // debugger
                  uni.redirectTo({
                    url: '/subcontractorB/pages/sclResult/sclResult?id=' + subRes.data + '&sclId=' + self.nextId
                  })
                })
                
                setTimeout(()=>{
                  uni.hideLoading()
                  self.showPopup = false
                  self.loading = false
                },300)
          		},
          		fail: function(err) {
          			self.$showToast('支付取消');
                uni.showLoading()
                
                setTimeout(()=>{
                  uni.hideLoading()
                  self.showPopup = false
                  self.loading = false
                },300)
          		}
          	});
          } else {
          	self.$showToast(res.data.message);
            setTimeout(()=>{
              uni.hideLoading()
              self.showPopup = false
              self.loading = false
            },300)
          }
        }).catch(e=>{
          setTimeout(()=>{
            this.showPopup = false
            this.loading = false
          },300)
        })

      },300),
      confirmHandle(){        
        const that=this;
      
        const query = uni.createSelectorQuery().in(that);
        query.select('.first-small-btn').boundingClientRect(data => {
          that.payHandle()
        }).exec();
      },
    },
  }
</script>

<style lang="scss" scoped>
  .before-result-page-mbti{
    padding-bottom: 10vh;
    background-color: #fff;
    position: relative;
    
    .fixed-right-tip{
      width: 182rpx;
      height: 50rpx;
      column-gap: 14rpx;

      background: linear-gradient( 180deg, #FDE591 0%, #FFCE66 100%);
      border-radius: 32rpx 0rpx 0rpx 32rpx;
      
      position: fixed;
      right: 0;
      top: 250rpx;
      z-index: 24;
      
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20rpx;
      
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #7E3508;
      // line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }
    
    .img-wrapper{
     position: relative; 
     
     .img{
       width: 750rpx;
       // margin-bottom: 10px;
     }
     
     .box-wrapper-1-pos{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;        
     }
     // .box-wrapper-1-pos -- end
     
     
     .small-btn-wrapper{
       width: 300rpx;
       height: 80rpx;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       
       margin-top: 40rpx;
       
       
       
       
       .img{
         width: 100%;
         height: 100%;
       }
     }
     
     .before-exit-btn-wrapper{
       width: 390rpx;
       height: 80rpx;
       background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
       border-radius: 40rpx;
       
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       
       .price-box{
         display: flex;
         align-items: flex-end;
         
         .unit{
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #FFFFFF;
           line-height: 37rpx;
           
           font-style: normal;
               margin-bottom: 4rpx;
               margin-right: 4rpx;
         }
         
         .num{
           font-family: HelveticaNeue, HelveticaNeue;
           font-weight: 500;
           font-size: 50rpx;
           color: #FFFFFF;
           line-height: 61rpx;
           
           font-style: normal;
         }
       }
       
       .abs-tip-box{
         position: absolute;
         bottom: 62rpx;
         left: 50%;
         transform: translateX(-50%);
         
         background-repeat: no-repeat;
         background-size: 100%;
         
         
         // display: flex;
         // justify-content: center;
         // align-items: center;
          width: 200rpx;
          height: 50rpx;
          box-sizing: border-box;
          text-align: center;
          padding-top: 6rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #FF4A4A;
          // line-height: 30rpx;
          // text-align: left;
          font-style: normal;
          
              // text-align: center;

       }
       
       .btn-text{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 30rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: center;
         font-style: normal;
         margin-left: 12rpx;
       }
       
       margin-top: 40rpx;
     }
     
     .box-wrapper-3-pos{
       position: absolute;
       top: 774rpx;
       right: 154rpx;
       left: 296rpx;
     }
     
     .box-wrapper-4-pos{
       position: absolute;
       bottom: 114rpx;
       left: 0;
       right: 0;
     }
     
     .box-wrapper-5-pos{
       position: absolute;
       bottom: 766rpx;
       left: 0;
       right: 0;
     }

      .box-wrapper-6-pos{
        position: absolute;
        bottom: 654rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-8-pos{
        position: absolute;
        bottom: 248rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-10-pos{
        position: absolute;
        bottom: 332rpx;
        left: 0;
        right: 0;
      }
      
      .box-wrapper-12-pos{
        position: absolute;
        bottom: 200rpx;
        left: 0;
        right: 0;
      }
      
     .box-wrapper-14-pos{
       position: absolute;
       bottom: 220rpx;
       left: 0;
       right: 0;
     }
    }
    
    // .img-wrapper -- end
    
    
    .info-box-list{
      display: flex;
      // align-items: center;
      flex-direction: column;
      justify-content: center;
      // column-gap: 24rpx;
      padding: 0 24rpx;
      
      .scl-num-box{
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 24rpx;
        color: #311C01;
        // line-height: 33rpx;
        text-align: left;
        font-style: normal;
        margin-bottom:12rpx;
        margin-top:84rpx;
      }
  
      .scl-name-box{
        width: 700rpx;
        height: 120rpx;
        background: rgba(255,255,255,0.6);
        border-radius: 12rpx;
        border: 3rpx solid #8B5B15;
        
        text-align:center;
        
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 40rpx;
        color: #1A1B1F;
        line-height: 120rpx;
        font-style: normal;
      }
      
      .img-wrapper{
        width: 700rpx;
        height: 330rpx;
        border-radius:24rpx;
        margin-top:60rpx;
        
        .img-item{
          width: 100%;
          height:100%;
          border-radius: 24rpx;
        }
      }
      
      .price-wrapper{
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: 30rpx;
        
        
        .unit{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #513A29;
          line-height: 37rpx;
          text-align: left;
          font-style: normal;
          margin-bottom: 6rpx;
        }
        
        .num{
          font-family: HelveticaNeue, HelveticaNeue;
          font-weight: 500;
          font-size: 50rpx;
          color: #513A29;
          line-height: 61rpx;
          text-align: left;
          font-style: normal;
          margin-left: 4rpx;
          margin-right: 8rpx;
        }
        
        .text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #513A29;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          margin-bottom: 6rpx;
        }
      }
    }
    
    // .info-box-list -- end
    
    
    
    .btn-wrapper-pos{
     position: fixed; 
     bottom: 7vh;
     
     left: 0;
     right: 0;
     
     display: flex;
     justify-content: center;
     
     .before-exit-btn-wrapper{
       width: 600rpx;
       height: 90rpx;
       
       background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
       border-radius: 40rpx;
       
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       
       .price-box{
         display: flex;
         align-items: flex-end;
         
         .unit{
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #FFFFFF;
           line-height: 37rpx;
           
           font-style: normal;
               margin-bottom: 4rpx;
               margin-right: 4rpx;
         }
         
         .num{
           font-family: HelveticaNeue, HelveticaNeue;
           font-weight: 500;
           font-size: 50rpx;
           color: #FFFFFF;
           line-height: 61rpx;
           
           font-style: normal;
         }
       }
       
       .btn-text{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 30rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: center;
         font-style: normal;
         margin-left: 12rpx;
       }
       
       // margin-top: 40rpx;
       
     }
     
     
     .btn-wrapper{
       width: 600rpx;
       height: 90rpx;
       .btn-img{
         width: 100%;
         height: 100%;
       }
     }
    }
   
   
   .popup-wrapper{
     width: 750rpx;
     min-height: 502rpx;
     background: #FFFFFF;
     border-radius: 40rpx 40rpx 0rpx 0rpx;
     box-sizing: border-box;
     padding-top: 66rpx;
     padding-bottom: constant(safe-area-inset-bottom); 
     padding-bottom: env(safe-area-inset-bottom); 
     
     .pay-btn{
       width: 600rpx;
       height: 90rpx;
       background: linear-gradient( 180deg, #A7AAFF 0%, #6783FF 100%);
       border-radius: 45rpx;
       
       display: flex;
       align-items: center;
       justify-content: center;
       margin: auto;
       margin-top: 40rpx;
       
       .text{
         font-family: PingFang-SC, PingFang-SC;
         
         font-size: 30rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: left;
         font-style: normal;
         margin-left: 10rpx;
       }
     }
     
     
   } 
  }
</style>